<template>
	<div class="menu-bar">
		<el-menu :default-active="menuIndex" class="el-menu-vertical" background-color="#283E51" text-color="#fff"
			:unique-opened="true" :collapse="isCollapse" @select="selectMenu">
			<!--循环加载单级菜单-->
			<el-menu-item v-for="(item, index) in presentRouter" :index="String(index)" :key="index"
				v-if="item.isMenu && !item.subLevel" @click="">
				<router-link class="menu-router-link" :to="item.path" @mousedown.native="changepage">
					<i :class="item.icon"></i>
					<span class="menu-name">{{ item.title }}</span>
				</router-link>
			</el-menu-item>
			<!--判断条件是否存在子级 存在子级则加载二级菜单-->
			<el-submenu v-else-if="item.subLevel" :index="String(index)" :key="index + item">
				<template slot="title">
					<i :class="item.icon"></i>
					<span class="menu-name">{{ item.title }}</span>
				</template>
				<el-menu-item-group>
					<el-menu-item v-for="(em, i) in item.subLevel" :key="item.id" :index="index + '-' + i"
						>
						<router-link class="menu-router-link" :to="em.path" @mousedown.native="changepage">
							<span class="menu-name">{{ em.title }}</span>
						</router-link>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
	import {
		root,
		admin,
		operations,
		salesman,
		agent,
		planner,
		consumer,
		consultant,
		goods,
		bonus,
		media
	} from "@/router";

	export default {
		props: ["isCollapse"],
		data() {
			return {
				// 当前的路由
				presentRouter: [],
				// 菜单默认激活的 index
				menuIndex: "0"
			};
		},
		mounted() {
			// 取出本地的 menuIndex 进行默认赋值
			// this.menuIndex = String(
			//   sessionStorage.getItem(this.$apis.getLocalKey().menuIndex) || 0)
			this.menuIndex = String(
				sessionStorage.getItem(this.$apis.getLocalKey().menuIndex) || "0"
			);

			// console.log(  this.menuIndex )
			// 初始化
			this.init();
		},
		methods: {
			init() {
				/**
				   *
				   1  root  超级管理员
				   2  admin  平台管理人员
				   3  operations  平台运维人员
				   4  salesman  业务员
				   5  agent  代理商
				   6  planner  规划师
				   7  consumer  消费者
				   8  consultant  咨询师
				   * */
				const ROLE_NAME = [
					"root",
					"admin",
					"operations",
					"salesman",
					"agent",
					"planner",
					"consumer",
					"consultant",
					"goods",
					"bonus",
					"media"
				];
				//TODO
				// 获取 role
				// const getRole = localStorage.getItem(this.$apis.getLocalKey().role);
				// console.log('getRole===========', getRole)
				// if (ROLE_NAME.includes(getRole)) {
				//   switch (getRole) {
				//     case "root":
				//       this.presentRouter = root.children;
				//       break;
				//     case "admin":
				//       this.presentRouter = admin.children;
				//       break;
				//     case "operations":
				//       this.presentRouter = operations.children;
				//       break;
				//     case "salesman":
				//       this.presentRouter = salesman.children;
				//       break;
				//     case "agent":
				//       this.presentRouter = agent.children;
				//       break;
				//     case "planner":
				//       this.presentRouter = planner.children;
				//       break;
				//     case "consumer":
				//       this.presentRouter = consumer.children;
				//       break;
				//     case "consultant":
				//       this.presentRouter = consultant.children;
				//       break;
				//     case "goods":
				//       this.presentRouter = goods.children;
				//       break;
				//     case "bonus":
				//       this.presentRouter = bonus.children;
				//       break;
				//     case "media":
				//       this.presentRouter = media.children;
				//       break;
				//   }
				// console.log(this.presentRouter)

				// }
				// this.presentRouter = root.children;
				//

				var qq = JSON.parse(sessionStorage.getItem(this.$apis.getLocalKey().user)).data.authority
				// console.log(qq)
				var tt = root.children;
				var dd = []

				for (let p in tt) {
					var ww = []
					for (let i in qq) {

						for (let t in tt[p].subLevel) {
							var itemtt = this.$apis.translate(qq[i].name)
							// console.log(  typeof(qq[i].name) )
							if (tt[p].subLevel[t].title == itemtt) {
								ww.push(tt[p].subLevel[t])
							}

						}
					}
					if (ww.length != 0) {
						// console.log(ww)
						tt[p].subLevel = ww
						dd.push(tt[p])
					}

				}
				// console.log(dd)
				dd.unshift(root.children[0])
				this.presentRouter = dd
			},
			// 当菜单激活改变
			selectMenu(index) {
				// console.log(index)
				// 将当前激活的菜单 id 存入本地
				sessionStorage.setItem(this.$apis.getLocalKey().menuIndex, index);
			},
			changepage() {
				// console.log(1)
				localStorage.setItem("page", 1);
			    // console.log(localStorage.getItem("page"))
			}
		}
	};
</script>

<style scoped lang="scss">
	.menu-bar {
		width: 100%;
		height: max-content;
	}

	.menu-router-link {
		padding: 0 30px !important;
	}

	.menu-name {
		margin-left: 10px;
	}

	.el-menu {
		// width: 180px;
		width: 220px;
		border-right: 0;
	}

	.el-menu--collapse {
		width: 64px !important;
	}

	.menu-bar a {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.el-menu-item i {
		display: inline-block;
		width: 20px;
		height: 14px;
	}
</style>
